<template>
  <view class="my-store-info">
    <view class="my-top" v-if="flag==true">
      <view class="content">
        <view class="no-store-h1">您还没有店铺</view>
        <view class="no-store-h2">1分钟极速开店，马上开始</view>
      </view>
      <view class="sub">
        <u-button
          @click="toCreate"
          type="primary"
          text="立即创建店铺"
        ></u-button>
      </view>
    </view>
	<view class="approve" v-if="flag==false&&storeInfos.storeStatus==30">
		<view class="approve-box">
			<view class="approve-title">申请驳回</view>
			<view class="approve-word">驳回原因：{{storeInfos.approveContext}}</view>
		</view>
		<view class="creat-btn" @tap="applyStore">重新申请</view>
	</view>
	<view class="approve" v-if="flag==false&&storeInfos.storeStatus==10">
		
		<view class="approve-box">
			<view class="approve-title">店铺审核中</view>
			<view class="approve-word">请耐心等待</view>
		</view>
		
	</view>
	<view class="approve" v-if="flag==false&&storeInfos.storeStatus==12">
		
		<view class="approve-box">
			<view class="approve-title">店铺初核中</view>
			<view class="approve-word">请耐心等待</view>
		</view>
		
	</view>
    <view class="my-top" v-if="flag==false&&storeInfos.storeStatus>10&&storeInfos.storeStatus<30">
      <view class="content flag">
        <u-cell-group>
          <u-cell
            @click="toPage('')"
            title="新增门店"
            :isLink="true"
            arrow-direction="right"
          >
          </u-cell>
        </u-cell-group>
      </view>
      <view class="content flag">
        <u-cell-group>
          <u-cell>
            <view slot="title" class="u-slot-title1">
              <text class="u-cell-text">收款账户</text>
            </view>
            <view slot="value" class="flex">
              <view v-if="eyeColor === '#333'">{{
                dealNum("card", storeInfos.accountNo) || "--"
              }}</view>
              <view v-else>{{ storeInfos.accountNo || "--" }}</view>
              <u-icon
                name="eye"
                @click="eyeSetFun"
                :color="eyeColor"
                size="16"
              ></u-icon>
            </view>
          </u-cell>
          <u-cell>
            <view slot="title" class="u-slot-title1">
              <text class="u-cell-text">支付宝费率</text>
            </view>
            <view slot="value" class="flex">
              {{ rateObj.aliRate || "-" }}
            </view>
          </u-cell>
          <u-cell>
            <view slot="title" class="u-slot-title1">
              <text class="u-cell-text">微信费率</text>
            </view>
            <view slot="value" class="flex">
              {{ rateObj.wxRate || "-" }}
            </view>
          </u-cell>
        </u-cell-group>
      </view>
      <view class="content" v-for="(storeInfo, i) in storeInfoArr" :key="i">
        <u-cell-group>
          <u-cell>
            <view slot="title" class="u-slot-title1">
              <view class="u-cell1">
                <view class="u-cell21"
                  >{{ storeInfo.name
                  }}<text class="u-cell2">{{
                    storeInfo.approveStatus === 20 ? "正常营业" : "审核中"
                  }}</text>
                </view>
                <u-button
                  v-if="storeInfo.approveStatus === 20"
                  type="error"
                  size="mini"
                  @click="toPageSet(storeInfo.id)"
                  >设置</u-button
                >
              </view>
            </view>
            <view slot="value" class="tips1"> </view>
          </u-cell>
          <u-cell>
            <view slot="title" class="u-slot-title1">
              <text class="u-cell3">店铺类型</text>
              <text class="u-cell4">{{
                storeInfo.storeClassName || "--"
              }}</text>
            </view>
            <view slot="value" class="tips1">
              <u--image
                v-if="storeInfo.imgLogo"
                :src="wxImg + storeInfo.imgLogo"
                width="60px"
                height="60px"
              ></u--image>
            </view>
          </u-cell>
          <u-cell>
            <view slot="title" class="u-slot-title1">
              <text class="u-cell3">店铺编号</text>
            </view>
            <view slot="value" class="tips1">
              <text class="u-cell4">{{ storeInfo.storeId || "--" }}</text>
            </view>
          </u-cell>
          <u-cell>
            <view slot="title" class="u-slot-title1">
              <text class="u-cell3">门店编号</text>
            </view>
            <view slot="value" class="tips1">
              <text class="u-cell4">{{ storeInfo.id || "--" }}</text>
            </view>
          </u-cell>
          <u-cell>
            <view slot="title" class="u-slot-title1">
              <text class="u-cell3">店铺负责人</text>
            </view>
            <view slot="value" class="tips1">
              <text class="u-cell4">{{ storeInfo.serviceName || "--" }}</text>
            </view> </u-cell
          ><u-cell>
            <view slot="title" class="u-slot-title1">
              <text class="u-cell3">负责人电话</text>
            </view>
            <view slot="value" class="tips1">
              <text class="u-cell4">{{
                storeInfo.leadingPhone || storeInfo.phone || "--"
              }}</text>
            </view> </u-cell
          ><u-cell>
            <view slot="title" class="u-slot-title1">
              <text class="u-cell3">客服电话</text>
            </view>
            <view slot="value" class="tips1">
              <text class="u-cell4">{{ storeInfo.phone || "--" }}</text>
            </view> </u-cell
          ><u-cell>
            <view slot="title" class="u-slot-title1">
              <text class="u-cell3">邮箱</text>
            </view>
            <view slot="value" class="tips1">
              <text class="u-cell4">{{ storeInfo.email || "--" }}</text>
            </view> </u-cell
          ><u-cell>
            <view slot="title" class="u-slot-title1">
              <text class="u-cell3">地址</text>
            </view>
            <view slot="value" class="tips1">
              <text class="u-cell4">{{ storeInfo.address || "--" }}</text>
            </view>
          </u-cell>
        </u-cell-group>
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp();
const globalData = app.globalData;
const wxImg = globalData.wxImg;
import {
  getStoreData,
  setStoreData,
  dealNum,
  httpPost,
  httpGet,
} from "@/utils/http.js";
const pic1 = require(`@/img/my/my1.png`);
export default {
  data() {
    return {
      wxImg,
      dealNum,
      pic1,
      storeInfos: {},
      rateObj: {},
      storeInfoArr: [],
      userInfo: {},
      flag: false,
      eyeColor: "#333",
	  userType:1,//普通会员2商家
	  storeStatus:null//10申请中，12店铺通过但没有进件，15第三方银行审核中，20审核通过，30审核失败，40审核店铺违规
    };
  },
  onShow() {
    this.userInfo = getStoreData("userInfo");
    // if (this.userInfo && this.userInfo.userType === 1) {
    //   this.flag = true; //没店铺
    // } else {
      
    //   this.flag = false;
    // }
  },
  onLoad() {
   this.listDirectstoreInfo();
  },
  methods: {
    eyeSetFun() {
      if (this.eyeColor === "#333") {
        this.eyeColor = "#3c9cff";
      } else {
        this.eyeColor = "#333";
      }
    },
    getStoreDataHead() {
      // if (getStoreData("storeInfo")) {
      //   this.storeInfos = getStoreData("storeInfo");
      //   return;
      // }
      const _this = this;
      httpGet("/api/sellerstore/selfInfo")
        .then((res) => {
			console.log(res)
          _this.storeInfos = res.data || {};
          setStoreData("storeInfo", _this.storeInfos);
		  if(!res.data){
			  _this.flag=true;//没有店铺
		  }else{
			 
			  _this.flag=false;//有店铺
			  _this.getStoreList();
		  }
        })
        .catch((e) => {
          _this.storeInfos = {};
        });
    },
    rateFun(id) {
      const _this = this;
      httpGet(`/api/payservicechannel/info/${id}`).then((res) => {
        _this.rateObj = res.data || {};
      });
    },
    listDirectstoreInfo() {
      const _this = this;
      this.getStoreDataHead();
    },
	getStoreList(){
		const _this = this;
		httpGet("/api/sellerstoreotherapply/storeList")
		  .then((res) => {
		    _this.storeInfoArr = res.data || [];
		    
		    setStoreData("storeInfoArr", _this.storeInfoArr);
		    _this.flag = false;
		  })
		  .catch((e) => {
		    _this.storeInfoArr = [];
		    setStoreData("storeInfoArr", []);
		  });
	},
    toPage(v) {
      if (v) {
        wx.navigateTo({
          url: "/pages/storeManage/store-add?id=" + v,
        });
      } else {
        wx.navigateTo({
          url: "/pages/storeManage/store-add",
        });
      }
    },
    toCreate() {
      wx.navigateTo({
      url: "/pages/storeManage/creat-store",
      });
    },
	applyStore(){
		wx.navigateTo({
		url: "/pages/storeManage/creat-store?storeInfos="+JSON.stringify(this.storeInfos),
		});
	},
	toPageSet(id){
		wx.navigateTo({
		url: "/pages/storeManage/storeSet?id="+id,
		});
	}
	
    
  },
};
</script>

<style lang="scss">
.my-store-info {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: #f8f8f8;
  width: 100vw;
  min-height: 100vh;
  font-size: 14px;
  padding: 16px;
  /deep/.uicon-eye {
    margin-left: 6px !important;
  }
  /deep/.u-button--mini {
    font-size: 12px !important;
    letter-spacing: 1px;
  }
  .content3 {
    position: fixed;
    padding: 0 16px;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 9;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    background: #f8f8f8;
    border-bottom: 1px solid #f1f1f1;
  }
  .sub {
    margin-top: 32px;
  }
  .content {
    background: #fff;
    border-radius: 4px;
    padding: 0 16px;
    box-sizing: border-box;
    margin-bottom: 16px;
    flex-direction: column;
    width: calc(100vw - 32px);
    &.flag {
      // margin-top: 32px;
      .flex {
        display: flex;
      }
    }

    .no-store-h1 {
      margin: 24px 0;
      font-size: 16px;
      color: #333;
      text-align: center;
      width: 100%;
    }
    .no-store-h2 {
      margin: 24px 0;
      font-size: 14px;
      color: #666;
      text-align: center;
      width: 100%;
    }

    /deep/.u-cell__body {
      padding: 16px 0 !important;
    }
    /deep/.u-cell-group__wrapper {
      .u-line:first-child,
      .u-cell:last-child .u-line {
        display: none !important;
      }
    }
  }
  .u-slot-title1 {
    display: flex;
    flex-direction: column;
    .u-cell1 {
      font-size: 16px;
      line-height: 30px;
      color: #333;
      display: flex;
      justify-content: space-between;
      /deep/.u-button--error {
        width: 50px;
        margin: 0;
        margin-top: 5px;
        padding: 0;
      }
    }
    .u-cell2 {
      font-size: 12px;
      margin-left: 6px;
      line-height: 30px;
      color: #3c9cff;
    }
    .u-cell21 {
      font-size: 15px;
      line-height: 30px;
      color: #d6a200;
    }
    .u-cell3 {
      font-size: 14px;
      line-height: 30px;
      color: #999;
      min-width: 50px;
    }
    .u-cell4 {
      font-size: 14px;
      line-height: 30px;
      color: #333;
    }
  }
  .my-top {
    display: flex;
    flex-direction: column;
    width: 100%;
    .ava {
      width: 40px;
      height: 40px;
      border-radius: 40px;
      overflow: hidden;
    }
  }
}
.approve{
	background-color: #fff;
	padding: 30rpx;
	margin-bottom: 30rpx;
	.approve-box{
		.approve-title{
			text-align: center;
			
		}
		.approve-word{
			text-align: center;
			color: #999;
			font-size: 24rpx;
			margin-top: 30rpx;
		}
	}
	.creat-btn{
		background:linear-gradient(to right, #3CBAF6, #56D1FC);
		color: #fff;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 40rpx;
	}
}
</style>
